<template>
    <div>
        <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        >
        <el-table-column prop="index" label="laoshi1" width="80"/>
        <el-table-column prop="userName" label="用户名" width="110"/>
        <el-table-column prop="ip" label="ip地址" width="130"/>
        <el-table-column prop="requestUrl" label="请求URL" width="280"/>
        <el-table-column prop="beginTime" label="请求时间" width="200"/>
        <el-table-column prop="requestMethod" label="请求方法" width="100"/>
        <el-table-column prop="cost" label="花费时长" width="110"/>
        </el-table>
    </div>
</template>

   

<script setup>
    import { ref, onMounted } from 'vue'
    import axios from 'axios'


    const tableData = ref([])
    //2.通过axios获取后台数据
    onMounted(() => {
        axios.get('/api/log/list').then(res => {
            tableData.value = res.data.data
            console.log(tableData.value)
        })
    })
</script>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>